<html lang="en"><head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>礼品卡生成器</title>  
    <script src="/assets/jquery.min.js"></script> 
    <script src="/assets/layer/layer.js"></script> 
    <style>
    
        .container {  
            max-width: 600px;  
            margin: 20px auto;  
            padding: 20px;  
            border: 1px solid #ccc;  
            box-shadow: 0 0 10px rgba(0,0,0,0.1);  
        }  
          
        #dateList {  
            list-style: none;  
            padding: 0;  
        }  
          
        .date-item {  
            margin-bottom: 10px;  
            cursor: pointer;  
            border: 1px solid #ccc;  
            background-color: #f9f9f9;  
            padding: 10px;  
        }  
          
        .date-item.collapsed {  
            max-height: 40px;  
            overflow: hidden;  
            transition: max-height 0.3s ease-out;  
        }  
          
        .date-item.expanded {  
            max-height: 1000px; /* 足够大以显示所有内容 */  
            transition: max-height 0.3s ease-in;  
        }  
          
        .code-list {  
            display: none;  
            padding-left: 20px; 
            max-height: 50vh;
            overflow-y: auto; 
        }  
          
        .code-list li {  
            margin-top: 5px;  
        }
    
        .date-item .code-list {  
            display: none; /* 默认隐藏核销码列表 */  
            padding-left: 20px;  
        }  
        
        .date-item.expanded .code-list {  
            display: block; /* 当日期项展开时显示核销码列表 */  
        }  
        .daochu{
            width: 82px;
            height: 25px;
            line-height: 25px;
            text-align: center;
            border-radius: 50px;
            border: 1px solid #999999;
            position: absolute;
            right: 10px;
            text-decoration: none;
            color: #000000;
            font-size: 14px;
            cursor: pointer;
        }
        .daochu:hover{
            color: #ffffff;
            background-color: #ff0000;
            border-color: #ff0000;
        }
        /* 其他样式保持不变 */
        /* 定义滚动条整体样式 */
        ::-webkit-scrollbar {
            width: 5px;  /* 设置滚动条宽度 */
            background-color: #f9f9f9; /* 背景颜色 */
        }
        
        /* 定义滚动条轨道样式 */
        ::-webkit-scrollbar-track {
            background-color: #e1e1e1; /* 轨道颜色 */
            border-radius: 10px; /* 轨道圆角 */
        }
        
        /* 定义滚动条滑块样式 */
        ::-webkit-scrollbar-thumb {
            background-color: #c1c1c1; /* 滑块颜色 */
            border-radius: 10px; /* 滑块圆角 */
        }
        
        /* 定义滚动条滑块hover样式 */
        ::-webkit-scrollbar-thumb:hover {
            background-color: #a8a8a8; /* 滑块hover颜色 */
        }
        </style>
    <script>
    
    function generateCode() {  
        // 生成一个随机的12位字母数字组合码  
        const chars = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';  
        let result = '';  
        const charactersLength = chars.length;  
        for (let i = 0; i < 12; i++) {  
            result += chars.charAt(Math.floor(Math.random() * charactersLength));  
        }  
        return result;  
    }  
      
    function generateCodes() {  
        const count = parseInt(document.getElementById('codeCount').value, 10); 
        const title = document.getElementById('title').value; 
        // const today = new Date().toISOString().split('T')[0]; // 获取当前日期  
        // const dateList = document.getElementById('dateList');  
        // dateList.innerHTML = ''; // 清空之前的列表  
      
        // // 创建日期项  
        // const dateItem = document.createElement('li');  
        // dateItem.classList.add('date-item', 'expanded'); // 默认展开  
        // dateItem.textContent = today;  
        // dateList.appendChild(dateItem);  
      
        // // 创建核销码列表  
        // const codeList = document.createElement('ul');  
        // codeList.classList.add('code-list');  
        // dateItem.appendChild(codeList);  
      
        // // 生成核销码并添加到列表中  
        // for (let i = 0; i < count; i++) {  
        //     const codeItem = document.createElement('li');  
        //     codeItem.textContent = generateCode();  
        //     codeList.appendChild(codeItem);  
        // }  
      
        // // 为日期项添加点击事件监听器  
        // dateItem.addEventListener('click', function() {  
        //     // 切换展开/收缩状态  
        //     this.classList.toggle('expanded'); // 切换expanded类  
        // });  
        //提交
        var index = layer.load(1, {  
        shade: [0.1,'#fff'] //0.1透明度的白色背景  
        }); 
        // layer.msg('生成中，请稍等。。。');
        $.ajax({
            dataType: 'json',
            type: 'POST',
            url: '/index/index/shengcheng',
            data: {count:count,title:title},
            success: function (data) {
                layer.close(index); // 关闭加载层  
                if (data.code == 0) {
                    layer.msg(data.msg);
                } else {
                    layer.msg(data.msg);
                    setTimeout(function(){
                        window.location.reload();
                    }, 1000);
                }
            },
            error: function (jqXHR, textStatus, errorThrown) {
                layer.close(index); // 关闭加载层  
            }
        });

    }  
      
    // generateCode函数保持不变  
      
    // 在页面加载完成后或某个事件触发时调用generateCodes函数  
    document.addEventListener('DOMContentLoaded', function() {  
        // 如果需要，可以在这里调用generateCodes或其他初始化函数  
        // generateCodes(); // 取消注释以在页面加载时生成核销码  
    });
      

    document.addEventListener('DOMContentLoaded', function() {  
        // 假设HTML结构已经加载在DOM中  
        const dateItems = document.querySelectorAll('.date-item'); // 获取所有日期项  
    
        dateItems.forEach(function(dateItem) {  
            // 为每个日期项添加点击事件监听器  
            dateItem.addEventListener('click', function(event) {  
                // 切换当前日期项的expanded类  
                this.classList.toggle('expanded');  
                var currentDate = this.getAttribute('data-date');  
                console.log(currentDate); // 输出: 当前点击的日期值，例如 "2023-04-01"  
                // $.ajax({
                //     dataType: 'json',
                //     type: 'POST',
                //     url: '/index/index/getcodelist',
                //     data: {day:currentDate},
                //     success: function (data) {
                //         data=JSON.parse(data);
                //         if (data.code == 0) {
                //             // layer.msg(data.msg);
                //         } else {
                //             console.log(data)
                //             console.log(data.code);
                //             console.log(data.data)
                //         }
                //     },
                //     error: function (jqXHR, textStatus, errorThrown) {

                //     }
                // });
    
                // 可选：如果你希望点击其他地方时也能关闭所有展开的日期项，  
                // 你可以在这里添加额外的逻辑来移除所有其他日期项的expanded类  
                // 但由于你只想点击哪个就收缩哪个，所以这行代码是注释掉的  
                // dateItems.forEach(item => {  
                //     if (item !== this) {  
                //         item.classList.remove('expanded');  
                //     }  
                // });  
    
                // 阻止事件冒泡（如果你不需要的话，可以注释掉或删除这行代码）  
                // event.stopPropagation();  
            });  
        });  
    });
    function fangfa()
    {
        // alert(11);
        event.stopPropagation();
    }

    // 注意：这里我们假设所有生成的核销码都归在当前日期下，  
    // 如果需要按日期分组，则需要进一步处理输入和逻辑。
    </script></head> 
    
     
    <body>  
    <div class="container">  
        <input type="text" id="title" placeholder="输入备注"> 
        <input type="number" id="codeCount" placeholder="输入礼品卡数量" min="1">  
        <button onclick="generateCodes()">提交</button>  
        <ul id="dateList">
            {volist name="datelist" id="datelists"}
            <li class="date-item collapsed" data-date="{$datelists['id']}" style="position: relative;">{$datelists['title']} <a class="daochu" onclick="fangfa()" href="/index/index/export?day={$datelists['id']}" target="_blank">导出</a>
                <ul class="code-list">
                    {volist name="$datelists['codelist']" id="codelist"}
                    <li>{$codelist['codes']}</li>
                    {/volist}
                    <!-- <li>QpR8RcSh4wKk</li>
                    <li>xIeQyPCRNbEz</li>
                    <li>fISsKxrduNwR</li>
                    <li>BTp14d9gbF4f</li>
                    <li>HCb8gBPIGKuD</li>
                    <li>n8lzxpVjytnj</li>
                    <li>EAgwDHlHdFJd</li> -->
                    
                </ul>
            </li>
            {/volist}
            
        </ul>  
    </div>  
      
    
      
    </body></html>